<template>
  <ul class="navlist">
    <router-link tag="li" to="/">
    <p class="iconfont fond">&#xe620;</p>
    <p>首页</p>
    </router-link>
    <router-link tag="li" to="/Category">
    <p class="iconfont fond">&#xe6b8;</p>
    <p>分类</p>
    </router-link>
    <router-link tag="li" to="/Cart">
    <p class="iconfont fond">&#xe699;</p>
    <p>购物车</p>
    </router-link>
    <router-link tag="li" to="/Me">
    <p class="iconfont fond">&#xe625;</p>
    <p>我的</p>
    </router-link>
  </ul>
</template>

<script>

export default {
  data () {
    return {
      data: ''
    }
  }
}
</script>

<style lang="less" scoped>
*{padding:0;margin:0;}
.navlist{
  width: 100%;
  position: fixed;
  bottom: 0px;
  left: 0px;
  display: flex;
  list-style: none;
  height: 5%;
  padding: 0.2rem 0 0.2rem 0;
  background: #f6f6f6;
  li{
    flex: 1;
    text-align: center;
    &.router-link-exact-active.router-link-active {
    color: skyblue;}
    .fond{
      font-size: 25px;
    }
  }

}
</style>
